import React, { FC, memo, PropsWithChildren } from "react"
import { View } from "@tarojs/components"
import styles from "./index.module.scss"

interface IProps {
  bottomWriteSpaceClassName?: string
}
/** 用于为tabbar页面腾出tabbar高度，避免tabbar挡住页面底部内容,仅用于tabbar页面组件使用 */
const TabbarPlaceholder: FC<PropsWithChildren<IProps>> = ({
  children,
  bottomWriteSpaceClassName = "bg-transparent"
}) => {
  return (
    <View className={styles["tabbar-placeholder"]}>
      {React.Children.map(children, child => child)}
      {/* /** 底部留白统一使用80px**/}
      <View className={`h-80rpx ${bottomWriteSpaceClassName}`}></View>
    </View>
  )
}
export default memo(TabbarPlaceholder)
